<template>
    <div class="photo_info">
        <!-- 内容头 -->
        <h3 class="h3">{{easyphotolist.title}}</h3>
        <div class="d_title">
            <span class="s_time">发表时间：{{easyphotolist.add_time}}</span>
            <span class="s_click">点击次数：{{easyphotolist.click}}次</span>
        </div>
        <hr>
        <!--缩略图  -->
        <div class="suoluetu">
             <vue-preview :slides="slide1" @close="handleClose"></vue-preview>
        </div>
       
        <div class="content" v-html="easyphotolist.content">

        </div>
        <comment :id="id"></comment>



    </div>
</template>

<script>

import comment from '../../newsinfosubcomp/newscomment.vue'
export default {
    data(){
        return{
            id:this.$route.params.id,
            easyphotolist:
                {title:"很美的落地大书柜，可以放很多书啊",add_time:"2019-3-3 3:3:3", click:3,
                content:"<h6>实时（real time）是一个计算机响应的水平，用户感觉足够及时或者是计算机与外部过程（例如，当天气不断变化时，可以清楚地把天气表现出来）保持同步。实时是一个关于实时运转得的计算机或者程序的形容词。实时描述的是一个人而不是机器对时间的感觉。在大型计算机主导的日子，对一个立即与从连接的终端工作的用户结合的大型机的表达是实时在线。</h6>"},
                slide1: [
                            {
                                src: 'https://farm6.staticflickr.com/5591/15008867125_68a8ed88cc_b.jpg',
                                msrc: 'https://farm6.staticflickr.com/5591/15008867125_68a8ed88cc_m.jpg',
                                alt: 'picture1',
                                title: 'Image Caption 1',
                                w: 600,
                                h: 400
                            },
                            {
                                src: 'https://farm4.staticflickr.com/3902/14985871946_86abb8c56f_b.jpg',
                                msrc: 'https://farm4.staticflickr.com/3902/14985871946_86abb8c56f_m.jpg',
                                alt: 'picture2',
                                title: 'Image Caption 2',
                                w: 1200,
                                h: 900
                            }
                        ]
            
        }
    },
    methods:{
        getphotoinfo(){
            this.$http.get('api/photoinfo'+this.id).then(result=>{
                if(result.body.status===0){
                   this.easyphotolist= result.body.message[0].forEach(element => {
                        element.w=500;
                        element.h=500;
                    });
                    
                }
            })
        }
    },
    components:{
        comment
    }
        
    
}
</script>

<style lang="scss" scpoed>
    .photo_info{
        padding: 3px;
        .h3{
            font-size: 16px;
            color:rgb(38,162,255);
            text-align: center;
            padding: 10px 0;
        }
       .d_title{
           font-size: 14px;
           display: flex;
           justify-content: space-between;
           color: #888585;
       }
       .content h6{
           font-size: 14px;
           color: black;
           line-height: 20px;
       }
       .suoluetu{
           div{
            text-align: center;
           }
           
       }
    }
</style>
